<template>
  <!-- 加载中占位 -->
  <div v-if="loading" style="text-align: center; padding: 100px">加载中...</div>

  <div v-else>
    <div class="process">
      <img src="../../assets/images/process3.png" alt="" />
    </div>
    <div class="content">
      <!-- 审核通过 -->
      <div class="succceed" v-if="status.auditStatus === '1'">
        <img src="../../assets/images/succeed.png" alt="" />
        <p>认证成功</p>
      </div>

      <!-- 审核不通过 -->
      <div class="succceed" v-else-if="status.auditStatus === '2'">
        <img src="../../assets/images/fail.png" alt="" />
        <p>认证失败</p>
        <p v-if="status.auditReason">{{ status.auditReason }}</p>
<!--        <p>-->
<!--          {{ status.auditType === "2" ? "打款信息错误，请重新打款" : "企业信息填写失败，请修改" }}-->
<!--        </p>-->
        <div class="button" @click="goToFix">返回修改</div>
      </div>

      <!-- 审核中 -->
      <div class="succceed" v-else>
        <img src="../../assets/images/audit.png" alt="" />
        <p>审核中</p>
        <p>正在审核，请耐心等待</p>
        <div class="button2" @click="goToPay" v-if="!fromPayPage">查看打款信息</div>
      </div>
    </div>
  </div>
  <!-- 打款信息弹窗 -->
  <PayInfoDialog 
    v-model:visible="payDialogVisible" 
    :from-result="true"
    @closed="handlePayDialogClosed" 
  />
</template>

<script setup>
import { reactive, ref, toRefs, nextTick, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
import useView from "@/hooks/useView";
import tabBus from '@/utils/tabBus'
import PayInfoDialog from "@/components/PayInfoDialog.vue";

// 不要在这里调用 useRouter()
const status = ref({
  step: "",
  auditStatus: "",
  auditType: "",
  companyName: "",
  auditReason: ""
});
const router = useRouter();
const route = useRoute();
// 用一个标志位控制"加载中"
const loading = ref(true);
// 标记是否从打款页面跳转过来
const fromPayPage = ref(route.query.fromPay === '1');
// 打款信息弹窗可见性
const payDialogVisible = ref(false);

const init = () => {
  getStatus();
};

const getStatus = async () => {
  try {
    const { data } = await baseService.get("/noc/authcompanyaudit/getStatus");
    status.value = data;
    
    // 如果是从打款页面跳转过来的，发送事件关闭其他标签页
    if (fromPayPage.value) {
      tabBus.emit('hideOtherTabs');
    }
  } catch (e) {
    ElMessage.error("获取状态失败");
  } finally {
    loading.value = false;
  }

  nextTick(() => {
    if (status.value.step === "0" || status.value.step === "1") {
      state.closeCurrentTab();
      router.replace("/cnas/certification-process");
    }
  });
};

function goToPay() {
  payDialogVisible.value = true;
}

function handlePayDialogClosed() {
  payDialogVisible.value = false;
}

function goToFix() {
  const res = baseService.get("/noc/authcompanyaudit/setStatus");

  if (status.value.auditType === "2") {
    state.closeCurrentTab();
    router.push("/cnas/makemoney-public");
  } else {
    state.closeCurrentTab();
    router.push("/cnas/certification-process");
  }
}

onMounted(() => {
  init();
});

const view = reactive({});
const state = reactive({ ...useView(view), ...toRefs(view) });
</script>

<style scoped lang="scss">
.process {
  text-align: center;
}

.content {
  margin: 0px auto;
  width: 917px;
  height: 717px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../../assets/images/resultsbg.png);
}

.succceed {
  position: relative;
  text-align: center;
  top: 26%;
}

.succceed p {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 500;
  color: rgba(56, 56, 56, 1);
}

.succceed p:nth-child(3) {
  margin-top: -10px;
  font-size: 24px;
}

.button {
  color: #ffff;
  font-size: 15px;
  margin: 0 auto;
  text-align: center;
  line-height: 32px;
  width: 100px;
  height: 32px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(22, 119, 255, 1);
}

.button2 {
  color: #ffff;
  font-size: 15px;
  margin: 0 auto;
  text-align: center;
  line-height: 32px;
  width: 120px;
  height: 32px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(22, 119, 255, 1);
}
</style>
